<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

    <p><a href="https://echarts.baidu.com/tutorial.html">5 分钟上手 ECharts</a></p>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script src="./lib/echart/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        /*
    内容说明：
    由于不知道是不是echart版本问题导致在这官网demo中不能拖拽，
    但本地亲测可以，这里的代码也可以作为参考，欢迎改进
    另博客地址：
    https://blog.csdn.net/u012138137/article/details/89456199
**/
        var nodes = [{ x: '5', y: '5', name: '服务器', img: 'data-1547632686885-o5Rfi3tyk.png', alarm: '产生告警了哦' },
        { x: '3', y: '0', name: '存储设备1', img: 'data-1547633192258-2EYYUDdcd.png' },
        { x: '7', y: '0', name: '存储设备2', img: 'data-1547633192258-2EYYUDdcd.png' },
        { x: '0', y: '10', name: '防火墙', img: 'data-1547633094304-08Q_2YEvH.png' },
        { x: '5', y: '10', name: '网络设备1', img: 'data-1547632915872-WZMUphq72.png', alarm: '产生告警了哦' },
        { x: '12', y: '12', name: '网络设备2', img: 'data-1547632915872-WZMUphq72.png' }]
        var links = [{ source: '存储设备2', target: '存储设备1', name: '数据传输' },
        { source: '存储设备1', target: '服务器', name: '数据传输' },
        { source: '服务器', target: '防火墙', name: '访问' },
        { source: '防火墙', target: '网络设备1', name: '访问' },
        { source: '网络设备1', target: '网络设备2', name: '访问' }]
        var charts = {
            nodes: [],
            links: [],
            linesData: []
        }
        var dataMap = new Map()
        for (var j = 0; j < nodes.length; j++) {
            var x = parseInt(nodes[j].x)
            var y = parseInt(nodes[j].y)
            var node = {
                name: nodes[j].name,
                value: [x, y],
                symbolSize: 20,
                alarm: nodes[j].alarm,
                symbol: 'image:///asset/get/s/' + nodes[j].img,
                itemStyle: {
                    normal: {
                        color: '#12b5d0',
                    }
                }
            }
            dataMap.set(nodes[j].name, [x, y])
            charts.nodes.push(node)
        }
        for (var i = 0; i < links.length; i++) {
            var link = {
                source: links[i].source,
                target: links[i].target,
                label: {
                    normal: {
                        show: true,
                        formatter: links[i].name
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#12b5d0'
                    }
                }
            }

            charts.links.push(link)
            // 组装动态移动的效果数据
            var lines = [{
                coord: dataMap.get(links[i].source)
            }, {
                coord: dataMap.get(links[i].target)
            }]
            charts.linesData.push(lines)
        }
        var option = {
            title: {
                text: '网络拓扑图'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}',
                alwaysShowContent: true
            },
            backgroundColor: "#F5F5F5",
            xAxis: {
                min: 0,
                max: 12,
                show: false,
                type: 'value'
            },
            yAxis: {
                min: 0,
                max: 12,
                show: false,
                type: 'value'
            },
            series: [{
                type: 'graph',
                layout: 'none',
                id: 'a',
                coordinateSystem: 'cartesian2d',
                edgeSymbol: ['', 'arrow'],
                // symbolSize: 50,
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        color: '#12b5d0'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        shadowColor: 'none'
                    }
                },
                xAxis: {
                    min: 0,
                    max: 12,
                    show: false,
                    type: 'value'
                },
                yAxis: {
                    min: 0,
                    max: 12,
                    show: false,
                    type: 'value'
                },
                // edgeSymbolSize: 8,
                draggable: true,
                data: charts.nodes,
                links: charts.links,
                z: 4,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (item) {
                                return item.data.name
                            }
                        }
                    }
                }
            }, {
                name: 'A',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                z: 4,
                effect: {
                    show: true,
                    trailLength: 0,
                    symbol: 'arrow',
                    color: '#12b5d0',
                    symbolSize: 8
                },
                lineStyle: {
                    normal: {
                        curveness: 0
                    }
                },
                data: charts.linesData,
                //画虚线框---
                /**
                 * 锚点起点坐标到终点坐标填于data值,此处忽略涉及隐私
                [
                    {
                        yAxis: 40,
                        xAxis: 89
                    },
                    {
                        yAxis: 2,
                        xAxis: 89
                    }
                ],
                */
                // markLine : {
                //     symbol:'none',
                //     lineStyle: {
                //         normal: {
                //             type: 'dashed',
                //             color:'#FF8C00',
                //             opacity:0.5
                //         },

                //     },
                //     label:{
                //       normal:{
                //         position:'middle',
                //         formatter:function(params){
                //             if(params.name){
                //             var str =  params.name.replace(/(.{6})/g, '$1\n')
                //             return str
                //             }
                //         },
                //       }
                //     },
                //     data : []
                // },    
            }]
        };
        myChart.setOption(option);


        myChart.setOption({
            graphic: echarts.util.map(charts.nodes, function (item, dataIndex) {
                return {
                    type: 'circle',
                    position: myChart.convertToPixel('grid', item.value),
                    shape: {
                        cx: 5,
                        cy: 5,
                        r: 20
                    },
                    invisible: true,
                    draggable: true,
                    ondrag: echarts.util.curry(onPointDragging, dataIndex),
                    onmousemove: echarts.util.curry(showTooltip, dataIndex),
                    onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                    z: 100
                };
            })
        });

        function onPointDragging(dataIndex, dx, dy) {
            console.log("tempV-----");
            var tempV = myChart.convertFromPixel('grid', this.position);
            console.log("tempV", tempV);
            charts.nodes[dataIndex].value = [tempV[0], tempV[1]];
            // Update data
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: charts.nodes
                }]
            });
        }

        function showTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        }

        function hideTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
        }

        window.addEventListener('resize', function () {
            myChart.resize();
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: charts.nodes
                }]
            });
        });



        // myChart.setOption(option);



    </script>




</body>

</html>